<template>
  <div class="product-box">
    <div class="box-p">
      <div class="w-400px p-l">
        <Category @node-click="handleCategoryNodeClick"></Category>
      </div>
      <div class="h-100% pp-r" ref="domH">
        <ProductIndex :categoryId="categoryId" :fHeight="fHeight"></ProductIndex>
      </div>
    </div>
  </div>
</template>

<script setup>
import Category from './category/newIndex.vue'
import ProductIndex from './newProductIndex.vue'

defineOptions({ name: 'ProductBox' })

const categoryId = ref()
/** 处理部门被点击 */
const handleCategoryNodeClick = async (row) => {
  categoryId.value = row.id
}
const domH = ref(null)
const fHeight = ref(0)
onMounted(() => {
  fHeight.value = domH.value.offsetHeight
})
</script>

<style lang="scss" scoped>
.product-box {
  width: 100%;
  flex-grow: 1;
}
.box-p {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.p-l {
  height: calc(100% - 32px);
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #172b4d1a;
  overflow: hidden;
  padding: 16px;
}
.pp-r {
  width: calc(100% - 452px);
  height: 100%;
}
</style>
